
<!DOCTYPE html>
<html lang="cn-ZH">
    <head>
        <meta charset="UTF-8">
        <title>Mss。-pagination</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="./style/normalize.css" media="screen">
        <link rel="stylesheet" type="text/css" href="./style/pagination.css" media="screen">
        <link rel="stylesheet" type="text/css" href="./style/common.css" media="screen">
        <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    </head>
    <body>
        <div class="wrapper">
            <h1>分页-pagination</h1>
            <p>需先引入jQuery，再引入pagination组件</p>
            <pre class="bad">&lt;script&nbsp;src="jquery.js"&gt;&lt;/script&gt;</pre>
            <pre class="bad">&lt;script&nbsp;src="jquery.pagination.js"&gt;&lt;/script&gt;</pre>
            <p>组件样式与功能分离，自定义样式（注：这里加样式是为了示例看的清楚，操作方便。）</p>
            <div class="eg">
                <div class="M-box3"></div>
                <p class="tips">参数：jump，开启跳转到第几页，跳转按钮文本内容可修改。（如果超出最大页数会变成总页数的值）</p>
                <p>HTML</p>
<pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"M-box3"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
                <p>Javascript</p>
<pre style="margin:15px 0;font:100 12px/18px;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'.M-box3'</span>).<span style="color:#000">pagination</span>({<br>    <span style="color:#000">pageCount</span>:<span style="color:#164">50</span>,<br>    <span style="color:#000">jump</span>:<span style="color:#219">true</span>,<br>    <span style="color:#000">coping</span>:<span style="color:#219">true</span>,<br>    <span style="color:#000">homePage</span>:<span style="color:#a11">'首页'</span>,<br>    <span style="color:#000">endPage</span>:<span style="color:#a11">'末页'</span>,<br>    <span style="color:#000">prevContent</span>:<span style="color:#a11">'上页'</span>,<br>    <span style="color:#000">nextContent</span>:<span style="color:#a11">'下页'</span><br>});</pre>
            </div>
            
        </div>
      
        <script src="./js/jquery.min.js"></script>
        <script src="./js/jquery.pagination.js"></script>
        <script>
            $(function(){
                

                $('.M-box3').pagination({
                    pageCount:50,
                    jump:true,
                    coping:true,
                    homePage:'首页',
                    endPage:'末页',
                    prevContent:'上页',
                    nextContent:'下页',
					callback:function(index){
						$('.now').text(index);
						alert(index.getCurrent()+"/"+index.getTotalPage());
					}
                });
            });
        </script>
    </body>
</html>